<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>汽车租凭</title>
    <link rel="icon" href="/resources/images/favicon.ico">
    <link rel="stylesheet" href="/resources/layui/css/layui.css">
</head>
<body style="background-image: url('../resources/images/bg1.jpg');
background-repeat: no-repeat;background-size: cover;-webkit-background-size: cover;background-attachment: fixed;">
<div style="width: 400px;height: 300px;position: absolute;top: 35%;left: 50%;margin-top: -125px;margin-left: -200px;border: #dddddd 1px solid;box-shadow:  2px 2px 10px #909090;border-radius: 3%">
    <form class="layui-form layui-form-pane">
        <p style="text-align: center;height: 40px;line-height: 40px;font-size: 25px;
        font-weight: bold;color: #1E9FFF;margin-bottom: 10px" th:text="#{login_title}"></p>
        <div class="layui-form-item" style="margin-left: 30px;">
            <label class="layui-form-label" th:text="#{login_username}"></label>
            <div class="layui-input-inline">
                <input type="text"
                       autocomplete="off"
                       value="admin"
                       name="loginName"
                       class="layui-input"
                       th:placeholder="#{login_pleaseusername}"
                       lay-verify="required"
                       lay-reqText="请输入用户名">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 30px;">
            <label class="layui-form-label" th:text="#{login_password}">密码</label>
            <div class="layui-input-inline">
                <input type="text"
                       autocomplete="off"
                       value="admin"
                       name="loginPassword"
                       class="layui-input"
                       th:placeholder="#{login_pleasepassword}"
                       lay-verify="required"
                       lay-reqText="请输入密码">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 30px;">
<!--                  这是滑动块&#45;&#45;-->
            <div class="layui-input-inline" style="width: 300px">
                <div id="slider"></div>
            </div>

        </div>
        <div class="layui-form-item" style="margin-left: 30px;margin-top: 30px">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-normal"
                        style="width: 300px"
                        type="button"
                        lay-submit id="subBtn"
                        lay-filter="subBtnFilter" th:text="#{login_btn}"></button>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 142px;margin-top: 30px">
            <div class="layui-input-inline">
               <a th:href="@{/index(l='zh_CN')}" class="layui-btn layui-btn-xs layui-btn layui-btn-normal" >中文</a>
                <a th:href="@{/index(l='en_US')}" class="layui-btn layui-btn-xs layui-btn layui-btn-normal" >English</a>
            </div>
        </div>

    </form>
</div>
<script src="/resources/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.config({base: 'resources/sliderVerify/'
    }).use(['form', 'jquery', 'layer'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        //let sliderVerify = layui.sliderVerify;
        // sliderVerify.render({//滑动块的代码
        //     elem: "#slider",
        //     text: '验证',
        //     isAutoVerify: true
        // });
        //表单的提交事件
        form.on("submit(subBtnFilter)", function (d) {
            let param = d.field;//获取表单数据
            $.post("/consumer/sysuser/login.do", param, function (rs) {
                if (rs.code != 200) {
                    layer.msg(rs.msg);
                    return false;
                }

                //跳转到管理界面主页
                location.href ="/page/main.do";
            })
            return false;//阻止表单默认提交行为
        })
    })
</script>
</body>
</html>